<script setup lang="ts">
import markGreen from "@/assets/other/idp/markGreen.png";
import markRed from "@/assets/other/idp/markRed.png";
import s2 from "@/assets/other/idp/printer.png";
import s3 from "@/assets/other/idp/usb.png";
import s4 from "@/assets/other/idp/camera.png";
import s5 from "@/assets/other/idp/router.png";
import unknow from "@/assets/other/idp/unknow.png";
import { ref, onMounted, onUnmounted } from "vue";
import Konva from "konva";
import {
  getList as getBranchList,
  getOfficePoint,
  getRequestParams
} from "@/api/idp/branch";
import { getPage as getClientPage } from "@/api/idp/client";

const tipVisible = ref(false);
const tooltipContent = ref();

const currentOrg = ref();

const stage = ref();
onMounted(async () => {
  document.addEventListener("mousemove", mousemoveHandler);
  getBranchList().then(res => {
    orgList.value = res;
    const branchId = getRequestParams("orgId");
    if (branchId) {
      currentOrg.value = branchId;
    } else {
      currentOrg.value = res[0].id;
    }
    loadOffice(currentOrg.value);
  });
});

const triggerRef = ref({
  getBoundingClientRect() {
    return position.value;
  }
});

const position = ref({
  top: 0,
  left: 0,
  bottom: 0,
  right: 0
});
const mousemoveHandler = e => {
  position.value = DOMRect.fromRect({
    width: 0,
    height: 0,
    x: e.clientX,
    y: e.clientY
  });
};
onUnmounted(() => {
  document.removeEventListener("mousemove", mousemoveHandler);
});
const orgList = ref<any[]>([]);

const orgChange = e => {
  console.log(e);
  loadOffice(e);
};
const loadOffice = async (orgId: string) => {
  const hm = new Map();
  getClientPage({
    hostname: "",
    ip: "",
    branchId: currentOrg.value,
    pageNum: 1,
    pageSize: 999
  }).then(res => {
    console.log(res);
    res.list.forEach(item => {
      hm.set(item.id, item);
    });
    getOfficePoint(orgId).then(res => {
      const json = JSON.parse(res.jsonStr);
      const topoShowDiv = document.getElementById("topoShow");
      console.log(json.attrs.width);
      topoShowDiv.style.width = parseInt(json.attrs.width) + "px";
      topoShowDiv.style.height = parseInt(json.attrs.height) + "px";
      stage.value = Konva.Node.create(json, "topoShow");
      const topoImgArr = stage.value.find(".topoImg");
      console.log(topoImgArr);
      for (let i = 0; i < topoImgArr.length; i++) {
        const imageObj = new Image();
        imageObj.onload = function () {
          topoImgArr[i].image(imageObj);
          stage.value.draw();
        };
        if (topoImgArr[i].parent.attrs.deviceData == undefined) {
          imageObj.src = unknow;
        } else {
          const devJson = JSON.parse(topoImgArr[i].parent.attrs.deviceData);
          imageObj.src = loadTopoImg(
            topoImgArr[i].attrs.imgType,
            hm.get(devJson.id).isOnline
          );
        }
        topoImgArr[i].on("mouseover", function (e) {
          document.body.style.cursor = "pointer";
          if (typeof e.target.parent.attrs.deviceData == "string") {
            const deviceData = JSON.parse(e.target.parent.attrs.deviceData);
            console.log(deviceData);
            tipVisible.value = true;
            tooltipContent.value = hm.get(deviceData.id);
          }
        });
        topoImgArr[i].on("mouseout", function () {
          document.body.style.cursor = "default";
          tipVisible.value = false;
          tooltipContent.value = {};
        });
      }
      stage.value.container().style.background =
        " url(" + "/api/idp/static/pic/" + res.backGroundImg + ")";
      stage.value.container().style.backgroundRepeat = "no-repeat";
      stage.value.container().style.backgroundSize = "contain";
    });
  });
};

// 加载 拓扑图 需要使用到的图片资源
function loadTopoImg(imgId, online) {
  switch (imgId) {
    case "tuoputu_computer":
      if (!online) {
        return markRed;
      }
      return markGreen;
    case "tuoputu_macbook":
      if (!online) {
        return markRed;
      }
      return markGreen;
    case "tuoputu_printer":
      return s2;
    case "tuoputu_usb":
      return s3;
    case "tuoputu_camera":
      return s4;
    case "tuoputu_router":
      return s5;
    default:
      return s3;
  }
}
</script>

<template>
  <div>
    <el-tooltip
      v-model:visible="tipVisible"
      content="Bottom center"
      placement="bottom"
      effect="light"
      trigger="click"
      virtual-triggering
      :virtual-ref="triggerRef"
    >
      <template #content>
        主机名称：{{ tooltipContent.hostname }}<br />
        IP地址：{{ tooltipContent.ip }}<br />
        显示主机各种信息<br />
        自定义信息，根据实际需求替换
      </template>
    </el-tooltip>
    <el-row>
      <el-col :span="12">
        <el-select
          v-model="currentOrg"
          placeholder="选择分支机构"
          @change="orgChange"
          style="width: 140px; margin-right: 10px"
        >
          <el-option
            v-for="item in orgList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <div id="topoShow" class="container-div" />
    </el-row>
  </div>
</template>

<style scoped></style>
